<template>
  <!-- 九、Home页面布局，使用 element-plus 里面的 Container 布局 -->
  <div class="home_container">
    <el-container>
      <!-- 十一、完善顶部 header -->
      <!-- 9.1设置高度 -->
      <!-- <el-header height="70px">叩丁狼电商运营平台</el-header> -->
      <el-header height="70px">
        <!-- 11.1导入子组件，src文件夹里面的 components 文件夹新建 TopHeader 文件夹新建 TopHeader.vue，去到该文件 -->
        <TopHeader />
      </el-header>
      <el-container>
        <!-- 9.3 侧栏 components 文件夹新建 AsideMenu 文件夹新建 index.vue, 使用 element-plus 的 Menu 菜单，去到该文件 -->
        <!-- <el-aside width="250px"> -->

        <!-- 14.10然后通过定义的显隐来动态控制左侧菜单的宽度 -->
        <!-- 14.11然后去到 TopHeader 文件夹里面的 index.vue -->
        <el-aside :width="!asideStore.isCollapse ? '64px' : '250px'" style="transition: 0.5s">
          <!-- 9.7导入子组件 -->
          <!-- 9.8因为我们需要把左侧的菜单，从接口请求回来的数据存起来，存到 pinia 里面，因为我们左侧的权限不一样，是显示不同的。去到 store 文件夹里面的 UserStore 文件夹里面的 UserStore.ts -->
          <AsideMenu />
        </el-aside>
        <!-- 十、右侧 Main 的处理，因为上面跟左侧是固定不变的，但是右侧的 Main 会跟着路由变化，所以我们要给个路由出口，切换不同的路由 -->
        <el-main>
          <!-- 十五、面包屑，使用 element-plus 的 Breadcrumb 面包屑 -->
          <!-- 15.1 components 新建文件夹 Breadcrumb 文件夹新建 index.vue，去到该文件 -->
          <!-- 15.4引入 Breadcrumb 子组件 -->
          <!-- 15.5去到 Breadcrumb 文件夹新建 index.vue -->
          <Breadcrumb />

          <!-- 10.1我们这边生成路由也是跟左侧生成路由的方式相同的，所以我们将 AsideMenu 文件夹里面的 index.vue 的方法封装起来，便于代码复用，新建 src 文件夹里面的 utils 文件夹里面的 index.ts，去到该文件 -->
          <RouterView />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import AsideMenu from "@/components/AsideMenu/index.vue";
//@ts-ignore
import TopHeader from '@/components/TopHeader/index.vue';
//@ts-ignore
import Breadcrumb from '@/components/Breadcrumb/Breadcrumb.vue';

// 14.9导入 store
import { useAsideStore } from '@/store/AsideStore/asideStore'

const asideStore = useAsideStore()

</script>

<style lang="less" scoped> // 滚动条隐藏

 &::-webkit-scrollbar {
   width: 0;
 }

 .home_container {
   .el-header {
     background-color: #409eff;
   }

   .el-aside {
     height: calc(100vh - 70px);
     background-color: #304156;
   }

   .el-main {
     height: calc(100vh - 70px);
   }
 }

 // 9.2书写样式
</style>